<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        TIP
        CSS 属性 clip-path:ellipse() 用于将一个元素裁剪成一个椭圆

        clip-path: ellipse(x轴半径 y轴半径 at 椭圆圆心);
    -->

    <style>
      .layout {
        width: 200px;
        height: 100px;
        background-color: khaki;
      }
      .ellipse1 {
        /*
              将元素裁剪成一个x轴半径为20px，y轴半为50px的椭圆，
              圆心位于元素左边中间（0px 50px) 
              */
        clip-path: ellipse(20px 50px at left center);
      }
      .ellipse2 {
        /*
              在元素坐标 30px 10px 处裁剪一个椭圆，
              椭圆水平与左边相切，垂直与上边相切
              */
        clip-path: ellipse(closest-side closest-side at 30px 10px);
      }
      .ellipse3 {
        /*
              在元素坐标 30px 50px 处裁剪一个椭圆，
              椭圆水平与右边相切，垂直与下边相切
              */
        clip-path: ellipse(farthest-side closest-side at 30px 80px);
      }
    </style>

    <div class="layout ellipse1"></div>
    <div class="layout ellipse2"></div>
    <div class="layout ellipse3"></div>
  </body>
</html>
